<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原子表当中的区间匹配</title>
</head>
<body>
    <input type="text" name="userName" placeholder="userName">
</body>
<script>
    /*
        原子表中的区间匹配 例如
        ^/[a-z]\w{2,6}$/i 表示不区分大小写有字母开头后面跟上字母或数字或下划线2到6位

        一定要注意的是 ^如果在原子表外面 表示的是以什么开头
            ^如果在原子表里面的最左边 表示的是出了。。。之外
                例如 [^\d]表示的是除了数字
    */
    const reg = /^[a-z]\w{2,5}$/i
    let input = document.querySelector('input')
    /*
        原生JS的添加事件的方法  addEventListener(事件名，回调函数)添加事件的监听机制
            注意：回调函数最好还是使用普通的function表达 因为这个function是有this的
        
            要获取input输入框的值 不是innerHtml 或者 innerTEXT
            而是使用value属性
    */
    input.addEventListener("keyup",function(){
        console.log(this.value.match(reg))
    })
</script>
</html>